<template>
    <div class="header">
        <h1>
            <img src="@/assets/images/logo.png" alt="">
        </h1>
        <div class="search" @click="goSearch">
            <i class="iconfont icon-sousuo"></i>
            <span>搜您喜欢的...</span>
        </div>
        <div class="kefu">
            <i class="iconfont icon-customerservice"></i>
        </div>
    </div>
</template>

<script>
export default {
    name:'headers',
    methods: {
        goSearch(){
            this.$router.push('/search');
        }
    }
}
</script>

<style scoped>
    .header{background: #b0352f;width: 100%;height: 1.6rem;display: flex;justify-content: space-around;align-items: center;}
    .header h1{width: 3.2rem;height: 1.333333rem;padding: 0 .266667rem;}
    .header h1 img{width: 100%;height: 100%;}
    .header .search{width: 5rem;height: .8rem;background: #fff;border-radius: 12px;display: flex;align-items: center;}
    .header .search i{padding: 0 .16rem;color: #ccc;}
    .header .search span{font-size: .373333rem;color: #ccc;}
    .header .kefu i{font-size: 0.96rem;color: #fff;}

</style>